<template>
	<view class="container">
		<view class="block" v-show="is_weixn" @click="hideBlock">
			<image src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-08/590b4202008271137512395.png" mode="widthFix"></image>
		</view>
		<image class="bg" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-08/99b61202008271137512244.png" mode="widthFix"></image>
		<view class="btn Android" @tap="downLoadAndroid">
			<image src="../../static/images/public/Android.png" mode=""></image>
			<text>Android下载</text>
		</view>
		<view class="btn IOS" @tap="downLoadIOS">
			<image src="../../static/images/public/ios1.png" mode=""></image>
			<text>IOS下载</text>
		</view>
	</view>
</template>

<script>
	import {
		appVersion
	} from "@/api/app.js"
	export default {
		data() {
			return {
				androidApkUrl: '',
				appleId: '',
				is_weixn: null,
			}
		},
		onLoad() {
			appVersion().then(res => {
				this.downloadApkUrl = res.data.config.app_url
				this.appleId = res.data.ios_config.ios_appleid
			})
			this.is_weixn = this.isWeixn()
		},
		methods: {
			downLoadAndroid() {
				window.open(this.downloadApkUrl)
			},
			downLoadIOS() {
				window.open( `https://itunes.apple.com/cn/app/id${this.appleId}?mt=8`)
			},
			isWeixn() {
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					return true;
				} else {
					return false;
				}
			},
			hideBlock() {
				this.is_weixn = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		.block {
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, .7);
			z-index: 999;
			image {
				position: absolute;
				left: 5vw;
				top: 0;
				display: block;
				width: 90vw;
			}
		}
		.bg{
			width: 750rpx;
		}
		.btn{
			position: absolute;
			left: 50%;
			margin-left: -210rpx;
			width: 420rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 36rpx;
			text-align: center;
			color: #45cd8f;
			border: 2px solid #45cd8f;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
		.Android{
			bottom: 200rpx;
		}
		.IOS{
			bottom: 60rpx;
		}
	}
</style>
